<template>
  
  <div class="doTranslateMain">
    <div class="pasteAndButtonGroup">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="請您把抖音鏈接放置於此"
        v-model="textarea"
        class="translatingInput"
      >
      </el-input>
      <div class="translateDiv">
        <el-button type="primary" class="translateButton" @click="tanslate()" v-loading.fullscreen.lock="fullscreenLoading">转换</el-button>
      </div>
    </div>
    <br>
    <video :src=videoUrl  controls width="30%" height="auto"></video>
  </div>
</template>
    <script>
export default {
  components: {},
  props: [],
  data() {
    return {
      fullscreenLoading: false,
      textarea:"",
      videoUrl:'',
    };
  },
  computed: {},
  watch: {},
  created() {
    this.$http.defaults.headers.common['Authorization']=`Bearer ${localStorage.getItem('Authorization')}`;
  },
  mounted() {},
  methods: {
    
    tanslate(){
      if(!this.textarea){
        this.fullscreenLoading = false
      }else{
        this.fullscreenLoading = true
      }
      this.$http.get(`/translate/translate/getTranslateVideo?url=${this.textarea}&username=11111`).then(
        (res)=>{
          this.videoUrl=res.data.url
          if(res.data.code){
            this.fullscreenLoading = false
          }
        }
      )
    }
  },
};
</script>
    <style>
.translateDiv{
    margin-top: 1%;
}
.translateButton {
    width: 50%;
  height: 100%;
}
.pasteAndButtonGroup {
  height: 100%;
  width: 100%;
}
.doTranslateMain {
  margin-top: 10%;
}
.translatingInput {
  width: 50%;
}
.box{
  margin: 10% 20%;
}
.video-js .vjs-big-play-button{
  margin-left:43%;
  margin-top: 25%;
}
</style>
    